<template>
  <ul class="list">
    <li v-for="nav in navList" :key="nav.name">
      <!-- 底部导航栏我们可以使用vue为我们提供的router-link标签,to属性代表你点击这个标签要前往的路径，active-class代表当页面地址中的路径与该标签里的to属性相同时，高亮状态的class名，我们这里定义为active，然后在css部分写样式即可。这种方式虽然方便，但是不太智能，就是说不太方便定制，因为router-link标签说到底其实就是a标签，所以会有很多默认样式在 -->
      <!-- <router-link :to="nav.path" active-class="active">{{
        nav.name
      }}</router-link> -->

      <!-- 下面我们说一种定制方法, custom代表自定义，通过v-slot拿到原生的isActive和navigate，一个代表是否高亮，一个代表跳转方法。另外，别忘了to属性，拿到后就好办了，直接里面搞个子元素，根据情况把这些放上去就好了，这样的会更加简洁，无需自己重写a标签样式了 -->
      <router-link custom v-slot="{isActive,navigate}" :to="nav.path">
        <li :class="isActive?'active':''" @click="navigate">{{ nav.name }}</li>
      </router-link>
    </li>
  </ul>
</template>

<script setup>
import { computed, onMounted, onUpdated, reactive, ref, watch } from "vue";

const navList = reactive([
  {
    name: "影院",
    path: "/cinema",
  },
  {
    name: "我的",
    path: "/mine",
  },
  {
    name: "电影",
    path: "/films",
  },
]);

defineProps(["currentHash"]);
</script>


<style scoped>
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:active {
  color: inherit;
  text-decoration: none;
}
.list {
  display: flex;
  width: 100vw;
  list-style: none;
  position: fixed;
  bottom: 0;
}

.list > li {
  color: rgba(0, 0, 0, 0.7);
  font-size: 4vw;
  width: 33.33%;
  text-align: center;
  padding: 2vw 0;
}

.list .active {
  color: orange;
}
</style>